import React, { Fragment } from 'react';
import { useEffect, useState } from 'react';
import { IonItemSliding, IonItem, IonLabel } from '@ionic/react';
// css
import IndexList from './indexList.module.scss';
// 跳转
import { createBrowserHistory } from 'history';

const History = createBrowserHistory();
const CommentList = (props) => {
  const [Uldata, setUldata] = useState(props.data);

  const goDetail = (e) => {
    props.history.push({
      pathname: '/detail',
      search: '?id='+e.id,
      state: { some: 'state' }
    });
  };

  return (
    <Fragment>
      {Uldata.map((item, index) => {
        return (
          <IonItemSliding
            onClick={() => {
              goDetail(item);
            }}
            className={`${[IndexList.li].join(' ')}`}
            key={'li_' + index}
          >
            <IonItem>
              <IonLabel>{item.name}</IonLabel>
            </IonItem>
            <div className={`${[IndexList.main_big].join(' ')}`}>
              <img src={item.mainImg} />
            </div>
          </IonItemSliding>
        );
      })}
    </Fragment>
  );
};
export default CommentList;
